<template>

  <div class="shoping" >
      <scroller 
  :on-refresh="refresh"
  :on-infinite="infinite" ref="myscroller">
         <div v-for="(item,index) in products" :item='item' :key='index'>
            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
            <router-link :to="{
                name:'detail',
                params:{
                    id:item.id,
                    name:item.name,
                    price:item.price,
                    img:item.img,
                    num:item.num
                }
            }">
                <div class="ym">
                    <img :src="item.img" alt="">
                    <h4>{{item.name}}</h4><br>
                    <div class="a"><span class="count">{{item.price}}</span><span>---{{item.num}}</span></div>
                </div>
            </router-link>
         </div>
         </scroller>
     </div>

     
 
</template>

<script>
import product from '../data/product';
import axios from 'axios';
import {mapState} from 'vuex';

export default {
  name: 'AdvList',
  data(){
      return {
          products:[],
          num:1
      }
  },
  mounted:function(){
      console.log(this.$store)
      this.products=product.products;
      this.$bus.$on('confirmOder',(id,num)=>{
          console.log('adv 收到change');
        //   console.log(id);
        //   console.log(num);
         this.products.forEach(el=>{
             if(el.id==id){
                 el.num = el.num-num;
             }
         })
      })
  },
  computed:{
      ...mapState(['name'])
  },
  created:function(){
      //let url ='https://question.llblog.cc/';
      let url ='https://question.llblog.cc/api.php';//做了跨域处理的
      //methos get post delete patch
      axios.get(url).then(res=>{
          console.log(res.data);
      });
  },
  beforeDestroy:function(){
      console.log('advlist销毁了');
  },
  methods:{
      refresh:function(done){
          console.log('refresh')
          done()
      },
      infinite:function(done){
          console.log('infinite');
         setTimeout(()=>{
						//this.$refs.myscroller.finishInfinite(true);
                        done();
					},1500)
      }
  }
}
</script>
<style scoped>
 .shoping {
     margin:0 auto;
    padding: 0 0.5rem;
    width: 100%;
 }
 .ym {
     width: 420px;
     height: 285px;
     background-color: #fff;
     margin-bottom: 20px;
     border-radius: 6px;
     margin:0 auto;
 }
 img {
     border-radius: 6px 6px 0px 0px;
     width: 420px;
 }
 .count {
     color: #E04F9F;
 }
 h4 {
     margin: 12px 40px -8px 20px;
 }
.a {
    margin-left: 20px;
    color: #7C7F92;
    font-size: 15px;
    padding-bottom: 10px;
    margin-bottom: 10px;
 }
</style>
